<template>
  <view class="containner">
    <u-navbar title="商家入驻" title-size="36" height="50">
      <!-- <text style="float: right;">入驻说明</text> -->
    </u-navbar>
    <view class="" width style="width: 100%; margin: 20rpx 0rpx 20rpx 0">
      <u-cell-group class="">
        <u-cell-item :arrow="false">
          <u-steps
            :list="numList"
            active-color="#10A28F"
            mode="number"
            :current="applyStep"
          ></u-steps>
          <view class="steps-tip">
            <text> {{ step1Desc }} </text>
            <!-- <text> 真实信息 </text> -->
            <text> 1-3工作日</text>
            <text>{{ step3Desc }}</text>
            <!-- <text>入驻成功</text> -->
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>
    <view class="" v-if="applyStep == 0 || applyStep == 2">
      <p v-if="applyStep == 2" class="warning">{{ form.auditNote }}</p>
      <view class="from">
        <view>
          <u-cell-group class="upload_the_module">
            <view style="padding: 30rpx; font-size: 26rpx; color: #999999">申请入驻资料信息</view>
            <u-line></u-line>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>商家名称</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  style=""
                  v-model="form.name"
                  placeholder="请输入商家名称"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item @click="onPicker(1)">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>经营类型</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.categoryName"
                  disabled
                  placeholder="请选择主营类目"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item @click="onPicker(5)" :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>经营地址</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="area"
                  disabled
                  placeholder="请选择地区"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>

            <u-cell-item :arrow="false" @click="chooseAddressView()">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>详细地址</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  disabled
                  v-model="form.detailAddress"
                  placeholder="例如街道、门牌号"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
              <u-icon slot="right-icon" name="/static/dw-g-l.png" size="42"></u-icon>
            </u-cell-item>
          </u-cell-group>
        </view>

        <view class="work_title_module">
          <u-cell-group>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>姓名</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.contactName"
                  placeholder="请输入姓名"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>联系电话</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.contactMobile"
                  placeholder="请输入联系电话"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>身份证号</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.ownerEidNo"
                  placeholder="请输入真实有效的证件号码"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
          </u-cell-group>
        </view>
        <view class="work_title_module card">
          <view class="title" style="width: 100%">
            <text style="color: red">*</text>
            <text>上传身份证照片</text>
          </view>
          <view class="upload-group dis-flex flex-y-between">
            <u-upload
              width="330"
              height="240"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload1"
              :file-list="fileList1"
              @on-remove="removeList1"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('card-f.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">人像面</view>
                </view>
              </view>
            </u-upload>
            <u-upload
              width="330"
              height="240"
              @on-remove="removeList2"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload2"
              :file-list="fileList2"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('card-b.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <!-- <u-image src="@/static/card-b.png" width="330rpx" height="240rpx"></u-image> -->
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">国徽面</view>
                </view>
              </view>
            </u-upload>
          </view>
        </view>
        <view class="work_title_module card">
          <view class="title" style="width: 100%">
            <text style="color: red">*</text>
            <text>营业执照</text>
          </view>
          <view class="upload-group dis-flex flex-y-between">
            <u-upload
              width="330"
              height="240"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload3"
              :file-list="fileList3"
              @on-remove="removeList3"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('yyzz-bg.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">营业执照</view>
                </view>
              </view>
            </u-upload>
          </view>
        </view>
        <u-gap height="200" bg-color="#F0F1F2"></u-gap>
      </view>
      <!--
			<view class="submit_the_module" @click="submit">
				<view>确认申请</view>
			</view> -->
      <view class="fixed-wapper">
        <view class="floor-tip">
          <view @click="checked = !checked">
            <u-icon
              :name="checked ? '/static/selected.png' : '/static/unselect.png'"
              size="35"
              style="margin-right: 10rpx; margin-top: 12rpx"
            ></u-icon>
          </view>
          <text>我已阅读并同意</text>
          <text
            style="color: #fa453c"
            @click="routeTo('/universal/webcontent/webcontent?key=shop_apply_agreement')"
            >《商家入驻协议》</text
          >
        </view>
        <view @click="submit" class="submit-btn btn"> 确认提交申请 </view>
      </view>
      <!-- <u-picker @confirm="confirm" :range="ranges" mode="selector" range-key="name" :params="params" v-model="show"></u-picker> -->
      <!-- </view> -->
    </view>
    <view class="apply-status1" v-else-if="applyStep == 1">
      <image class="img" :src="`${getImageUrl('join-sh.png')} `" mode=""></image>
      <p>资料审核中，预计需要1-3个工作日敬请耐心等待，谢谢！</p>
      <view class="show-apply" @click="showApplyModel = true">查看加入申请信息</view>
    </view>
    <view class="" v-else-if="applyStep == 3 || applyStep == 4">
      <view class="apply-view2">
        <view class="apply-view2-top">
          <view class="" style="font-size: 32rpx"> 请选择入驻年限 </view>
          <view class="price-box dis-flex flex-y-between">
            <view
              v-for="item in payList"
              :key="item.id"
              class="price-box-item"
              :class="pickId == item.id ? 'ckecked' : ''"
              @click="pickId = item.id"
            >
              <view class="item-top"> ¥{{ item.price * 0.01 }} </view>
              <view class="item-top-floor"> {{ item.year }}年 </view>
            </view>
          </view>
        </view>

        <!-- 				<view class="popup-box">
					<p style="margin-left: 20rpx;">请选择支付方式</p>
					<view @click="payMethod = 'wxpay' " class="pay-method dis-flex flex-y-center flex-y-between">
						<view class="pay-method-left">
							<u-image src="/static/wxzf.png" width="50rpx" height="50rpx"></u-image>
							<text style="margin-left: 28rpx">微信支付</text>
						</view>
						<u-icon v-if=" payMethod == 'wxpay'" class="pay-method-right" name="/static/selected.png"
							size="36"></u-icon>
					</view>
				</view> -->
        <view @click="paySubmit" class="submit-pay"> 立即支付 </view>
      </view>
    </view>
    <view class="apply-status1" v-else-if="applyStep == 100">
      <image class="img" :src="`${getImageUrl('join-ok.png')} `" mode=""></image>
      <p>您已成功入驻！</p>
      <view class="bt" @click="routeTo('/store/index')">进入商家中心</view>
    </view>
    <u-picker
      @confirm="changeRanges"
      :range="Ranges"
      mode="selector"
      :params="params"
      range-key="name"
      v-model="showCalander"
    ></u-picker>
    <u-picker mode="region" @confirm="change" v-model="showArea"></u-picker>
    <u-toast ref="uToast" />

    <PayPopup ref="payPopupRef">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        入驻缴费
      </p>
    </PayPopup>

    <u-popup
      v-model="showApplyModel"
      mode="bottom"
      width="750"
      height="600"
      :closeable="true"
      border-radius="20"
    >
      <view class="apply_box">
        <view class="apply-tl">申请信息</view>
        <view class="apply-info">
          <view>店铺名称：{{ form.name }}</view>
          <view>主营类目：{{ form.categoryName }}</view>
          <view>联系人：{{ form.contactName }}</view>
          <view> 联系方式：{{ form.contactMobile }} </view>
          <view> 身份证号：{{ form.ownerEidNo }} </view>
          <view> 经营地址：{{ form.fullAddress }} </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '../../common/config'
import PayPopup from '@/components/PayPopup.vue'
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      showApplyModel: false,
      checked: true,
      payOrderId: '',
      resStatus: 3,
      showCalander: false,
      showArea: false,
      show: '',
      showPopup: false,
      action: BASE_URL + UP_URL,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      payMethod: '',
      imgUrl: '',
      radioList: [
        {
          name: '商家入驻',
          disabled: false,
          value: 1
        },
        {
          name: '厂家入驻',
          disabled: false,
          value: 2
        }
      ],
      step1Desc: '真实信息',
      step3Desc: '入驻成功',
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radioValue: '商家入驻',
      pickerMode: 'select',
      single: '',
      industryRanges: [],
      Ranges: [],
      params: {},
      area: '',
      pickId: '',
      applyStep: 0,
      step: 0,
      numList: [
        {
          name: '提交申请'
        },
        {
          name: '平台审核'
        },
        {
          name: '开店成功'
        }
      ],
      show: false,
      //提交对象
      form: {
        name: '',
        areaId: '',
        detailAddress: '',
        countyCode: '',
        latitude: 106.690801,
        longitude: 26.567322,
        introduction: '',
        type: 0,
        categoryName: '',
        categoryId: '',
        contactName: '',
        contactMobile: '',
        ownerEidNo: '',
        ownerEidBackUrl: '',
        ownerEidBackUrl: '',
        businessLicenseUrl: '',
        agencyId: uni.getStorageSync('agencyId') || ''
      },
      payList: [
        {
          id: 1,
          price: '12',
          year: '1'
        },
        {
          id: 2,
          price: '12',
          year: '1'
        },
        {
          id: 3,
          price: '12',
          year: '1'
        }
      ],
      labelStyle: {
        'font-size': '24rpx;'
      }
    }
  },
  onLoad() {
    this.imgUrl = BASE_URL
    this.$u.get('/app-api/shop/category/list?parentId=0').then((res) => {
      this.industryRanges = res.data
    })
  },
  onShow() {
    this.checkApply()
  },
  methods: {
    checkApply() {
      this.$u.get('/app-api/shop/info/check').then((res) => {
        this.applyStep = res.data.step
        if (res.data.step == 1) {
          this.step = 1
          this.step1Desc = '已提交'
          this.form = res.data.info
        } else if (res.data.step == 2) {
          this.step = 0
          this.step1Desc = '重新提交'
          this.numList[1].name = '审核未通过'
          this.form = res.data.info
          this.area = res.data.info.provinceCityCounty
          this.fileList3.push({
            url: res.data.info.businessLicenseUrl
          })
          this.fileList2.push({
            url: res.data.info.ownerEidBackUrl
          })
          this.fileList1.push({
            url: res.data.info.ownerEidFrontUrl
          })
          // })
        } else if (res.data.step == 3 || res.data.step == 4) {
          this.step = 2
          this.step1Desc = '已提交'
          this.numList[1].name = '审核通过'
        } else if (res.data.step == 5) {
          this.step = 2
          this.step3Desc = '入驻成功'
        }
        if (res.data.step == 3 || res.data.step == 4) {
          this.step = 2
          this.$u.get('/app-api/shop/enter-package/list').then((res) => {
            this.payList = res.data
          })
        }
      })
    },
    //选择地址、修改编辑地址
    chooseAddressView(index) {
      const app = this
      uni.chooseLocation({
        success: (res) => {
          console.log('res', res)
          if (!res.name || !res.address || !res.latitude || !res.longitude) return
          // let addressObj = {
          // 	title: res.name,
          // 	address: res.address,
          // 	latitude: res.latitude,
          // 	longitude: res.longitude
          // }
          // console.log('addressObj', addressObj)
          app.form.latitude = res.latitude
          app.form.longitude = res.longitude
          // app.form.countyCode = res.address
          app.form.detailAddress = res.address + res.name
        }
      })
    },
    getLocationCode() {
      this.$u.api
        .getLocationCode({
          latitude: this.form.latitude,
          longitude: this.form.longitude
        })
        .then((res) => {
          this.area = res.province + '-' + res.city + '-' + res.county
          // this.form.detailAddress = res.formatted_address
        })
    },
    routeTo(url) {
      this.$u.route(url)
    },
    onPicker(e) {
      if (e == 0) {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        }

        this.showCalander = true
        this.flag = e
        return
      } else if (e == 1) {
        this.showCalander = true
        this.Ranges = this.industryRanges
        this.flag = e
        return
      } else if (e < 4) {
        this.params = {
          year: false,
          month: false,
          day: false,
          hour: true,
          minute: true,
          second: false
        }
        this.showCalander = true
        this.flag = e
        return
      }
      this.flag = e
      this.showArea = true
    },
    change(e) {
      console.log(e)
      this.form.countyCode = e.area.value
      this.area = e.province.label + '-' + e.city.label + '-' + e.area.label
    },
    radioChange(e) {
      this.form.type = e
    },
    changeRanges(res) {
      // console.log(this.industryRanges[res]);
      this.form.categoryId = this.industryRanges[res].id
      this.form.categoryName = this.industryRanges[res].name
    },
    removeList1() {
      console.log('removeList1')
      this.form.ownerEidFrontUrl = ''
    },
    removeList2() {
      this.form.ownerEidBackUrl = ''
    },
    removeList3() {
      console.log('removeList1')
      this.form.businessLicenseUrl = ''
    },
    onPopup() {
      this.showPopup = true
    },
    //删除标签
    DeleteTheTag(index) {
      this.TagCollection.splice(index, 1)
    },
    //删除活动
    DeleteTheActivity(index) {
      this.SelectActivities.splice(index, 1)
    },

    submit() {
      this.$refs.uUpload1.lists.forEach((val) => {
        if (val.response && val.response.data) {
          this.form.ownerEidFrontUrl = val.response.data
        }
      })

      this.$refs.uUpload2.lists.forEach((val) => {
        if (val.response && val.response.data) {
          this.form.ownerEidBackUrl = val.response.data
        }
        // this.form.ownerEidBackUrl = val.response.data
      })
      this.$refs.uUpload3.lists.forEach((val) => {
        if (val.response && val.response.data) {
          this.form.businessLicenseUrl = val.response.data
        }
        // this.form.businessLicenseUrl = val.response.data
      })

      if (this.form.categoryId == '') {
        this.$u.toast('请选择入驻分类')
        return
      }

      if (this.form.name == '') {
        this.$u.toast('请输入商家名称')
        return
      }
      if (this.form.detailAddress == '') {
        this.$u.toast('请输入详细地址')
        return
      }
      if (this.form.countyCode == '') {
        this.$u.toast('选择选择经营地址')
        return
      }

      if (this.form.contactName == '') {
        this.$u.toast('请输入联系人')
        return
      }
      if (this.form.contactMobile == '') {
        this.$u.toast('请输入联系手机号')
        return
      }

      if (this.form.businessLicenseUrl == '') {
        this.$u.toast('请上传营业执照')
        return
      }
      if (this.form.ownerEidNo == '') {
        this.$u.toast('请输入身份证号')
        return
      }

      if (this.form.ownerEidFrontUrl == '' || this.form.ownerEidBackUrl == '') {
        this.$u.toast('请上传身份证照片')
        return
      }

      this.$u.post('/app-api/shop/info/save', this.form).then((res) => {
        if (res.code != 0) {
          this.$u.toast(res.msg)
          return
        }

        this.$u.toast('申请成功')
        this.checkApply()
        // setTimeout(() => {
        // 	uni.switchTab({
        // 		url: "/pages/index/index"
        // 	})
        // }, 1500)
      })
      // }
    },

    paySubmit() {
      if (!this.pickId) {
        this.$u.toast('请选择入驻年限')
        return
      }

      this.$u
        .post('/app-api/shop/enter-apply/submit', {
          enterPackageId: this.pickId
        })
        .then((res) => {
          this.payOrderId = res.data.tradeNo
          this.$refs.payPopupRef.open(this.payOrderId, '', res.data.price === 0)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('@/style/btn.css');

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  width: 100%;
}

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;
  padding-left: 4%;

  .submit-btn {
    width: 96%;
    // left: 4%;
  }
}

.text_right {
  ::v-deep input {
    text-align: right;
  }
}

input {
  font-size: 30rpx;
  color: #333333;
}

.must {
  color: red;
}

.cell-right {
  margin-right: 100rpx;
}

.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;

  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #0f76bc;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

u-switch {
  padding: 0 16rpx;
}

.label_containers {
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;

  .item {
    margin-top: 20rpx;
    position: relative;
    margin-left: 24rpx;
    padding: 10rpx 16rpx;
    border-radius: 30rpx;
    background-color: #ececec;
    color: #333333;
    font-size: 23rpx;
    line-height: 1;

    .close {
      padding: 4rpx;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      right: -16rpx;
      top: -10rpx;
    }
  }
}

.add_label_button {
  display: flex;
  justify-content: flex-end;

  view {
    font-size: 20rpx;
    border-radius: 20rpx;
    padding: 12rpx 16rpx;
    background-color: #f69c15;
    color: #f2f2f2;
    line-height: 1;
  }
}

.attachment_upload_button {
  padding: 16rpx 0;
  display: flex;

  .button_container {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    background-color: #fa9e15;
    color: #f2f2f2;
  }
}

.from {
  .custom_modules {
    padding-left: 20rpx;
  }

  .work_title_module {
    margin-top: 16rpx;
  }
}

.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}

.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;

    text {
      color: #2d93fd;
    }
  }
}

.steps-tip {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
}

.apply-status1 {
  margin-top: 220rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .show-apply {
    font-weight: 400;
    font-size: 30rpx;
    color: #10a28f;
    line-height: 60rpx;
    border-bottom: 1rpx solid #10a28f;
    // padding-bottom: 10rpx;
    margin-top: 20rpx;
  }

  .img {
    width: 550rpx;
    height: 300rpx;
  }

  p {
    width: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    line-height: 60rpx;
  }
  .bt {
    width: 710rpx;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin: auto;
    margin-top: 80rpx;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
  }
}

.apply-view2-top {
  background-color: #fff;
  padding: 30rpx;
  font-size: 30rpx;
  color: #333333;
}

.price-box {
  margin-top: 30rpx;
}

.price-box-item {
  width: 200rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10rpx;

  .item-top {
    font-size: 36rpx;
    font-weight: 600;
  }

  .item-top-floor {
    font-size: 30rpx;
  }
}

.ckecked {
  background: #10a28f;
  color: #fff;
}

.popup-box {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  font-size: 32rpx;
  margin-top: 20rpx;
}

.popup-price {
  font-size: 50rpx;
  font-weight: 600;
  padding: 20rpx;
  text-align: center;
}

.pay-method {
  overflow: auto;
  padding: 25rpx 20rpx;
  margin-top: 15rpx;
}

.pay-method-left {
  float: left;
  display: flex;
  align-items: center;
}

.pay-method-right {
  float: right;
}

.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
}

.submit-pay {
  width: 700rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #10a28f;
  border-radius: 65rpx;
  color: #ffffff;
  align-self: center;
  font-size: 35rpx;
  margin: 80rpx 0 0 20rpx;
}

.title {
  font-size: 30rpx;
  width: 200rpx;
}

.card {
  height: 360rpx;
  background: #ffffff;
  padding: 26rpx 32rpx;
}

.upload-group {
  width: 100%;
  margin-top: 28rpx;

  .slot-btn {
    // margin-top: 28rpx;
    position: relative;
    width: 330rpx;
    height: 240rpx;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .des {
      text-align: center;

      .des-text {
        font-size: 24rpx;
        color: #10a28f;
      }
    }
  }
}

.apply_box {
  padding: 98rpx 20rpx 43rpx 20rpx;

  .apply-tl {
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }

  .apply-info {
    width: 710rpx;
    // height: 400rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx 17rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 60rpx;
  }
}
</style>
